// index.js
import ReactDOM from 'react-dom'
import App from './App'


ReactDOM.render(
  <App />,
  document.getElementById('root')
)

// App.js
import React from 'react'
import Course from './components/Course'

const App = () => {
  const course = {
    id: 1,
    name: 'Half Stack application development',
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10,
        id: 1
      },
      {
        name: 'Using props to pass data',
        exercises: 7,
        id: 2
      },
      {
        name: 'State of a component',
        exercises: 14,
        id: 3
      }
    ]
  }
  
  return <Course course={course} />
}

export default App

// components/Course.js
import React from "react";

const Header = ({course}) => {
  return(
    <h1>{course}</h1>
  )
}

const Content = ({parts}) => {
  return(
    <>
      {parts.map(part => 
        <Part key={part.id} name={part.name} exercises={part.exercises}/> 
      )}
    </>
  )
}

const Part = (props) => {
  return (
    <p>{props.name} {props.exercises}</p>
  )
}

const Total = ({parts}) => {

  const total = parts.reduce((s, p) => {
    console.log('what is happening', s, p)
    return p.exercises + s;
  },0)
  console.log(total)
  
  return(
    <p>Number of exercises {total}</p>
  )
}

const Course = ( {course} ) => {
  return(
    <div>
      <Header course={course.name}/>
      <Content parts={course.parts}/>
      <Total parts={course.parts} />
    </div>
  )
}

export default Course